<template>
    <!--导航栏-->
    <div class='menu-wrapper'>

        <template v-for="(item ,index) in menuList">

            <el-menu-item :index="item.id" v-if="!item.subMenu" @click="openMain(item.url, item.name, item.id,item.path)" >
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>

            <template v-else>
                <el-submenu :index="item.id + '-' + item.name" v-if="item.subMenu">
                    <!--这个是当前子项自己的名称-->
                    <template slot="title" title="">
                        <i :class="item.icon"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <!--递归调用当前组件-->
                    <sup-menu :menuList='item.subMenu'></sup-menu>
                </el-submenu>
            </template>
        </template>
    </div>
</template>

<script>

    export default {
        name: "SupMenu",
        data(){
            return {

            }
        },
        props:{
            menuList:{
                type: Array
            }
        },
        created(){
        },

        methods: {
            // 点击子菜单的时候触发，
            openMain(menuUrl,menuName,menuId, menuPath){
                // 0、处理参数
                let result = this.dealUrlAndParams(menuUrl,menuPath);

                // 1、联动面包屑
                this.$store.commit("dealBreadArr", menuPath);

                // 2、联动tag栏（包括激活的tag栏）
                this.dealTag(result,menuName,result.route.name,menuId);

                // 3、联动激活的菜单
                this.$store.commit("dealActiveMenu",menuId);

                // 3、跳转路由，显示当前路由对应的组件
                this.$router.push(result.route);
            },

            // 处理tag栏
            dealTag(params,menuName,hash,menuId){

                // 判断是否存在
                let isExist = false;
                let name= hash +'-'+ menuId;
                if(this.$store.state.topTagArr.length > 0){
                    this.$store.state.topTagArr.some(item=>{
                        if(item.name == name){
                            // 设置为激活
                            item["isActive"] = true;
                            // 设置激活的值
                            this.$store.state.activeTagIndex = name;
                            isExist = true;
                            return true;
                        }
                    });
                }
                if(isExist) {
                    // 直接结束，不需要添加了,
                    return ;
                }

                // 没找到那么需要将原来激活的设置为非激活
                this.$store.state.topTagArr.forEach(item=>{
                    item['isActive'] = false;
                });

                // 先出来一个，最早添加的出来
                if(this.$store.state.topTagArr.length > 7) {
                    this.$store.state.topTagArr.pop();
                }
                // 将当前这个加进去

                let obj = {"name":name,"title":menuName,"params":params,"isActive":true};
                this.$store.state.topTagArr.push(obj);
                // 放到缓存里面去
                localStorage.setItem("topTagArr",JSON.stringify(this.$store.state.topTagArr));

                // 处理激活的标签
                this.$store.commit("dealActiveTagIndex",name);
            },

            // 处理路径的参数
            dealUrlAndParams(menuUrl, menuPath){
                // 去掉最前面的#/
                let url = menuUrl.replace("#/","");
                let hash = url.substring(0,url.indexOf("?"));
                // 获取？后面的参数
                // sectionRegisterAcceptPage?appname=sectionRegisterAcceptPage

                // 处理携带了参数的情况
                let query = {};
                if(url.indexOf("?") > -1){
                    // 截取?后面的字符串
                    let paramStr = url.substring(url.indexOf("?") + 1);
                    if(paramStr && paramStr.length > 0) {
                        let paramObj = paramStr.split("&");
                        if(paramObj.length > 0) {
                            // 迭代获取所有的参数
                            paramObj.forEach(item=>{
                                let obj = item.split("=");
                                query[obj[0]] = obj[1];
                            })
                        }
                    }
                }
                return {route:{name:hash,query:query}, params:{menuPath:menuPath}};
            },
        },

        components: {
        }

    }
</script>

<style lang="scss" scoped>

    .menu-wrapper {
        li {
            text-align: left;
        }
    }

</style>
